<extend name="Base/base"/>
<block name="main">

    
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            轮播图信息输出表
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="__CONTROLLER__/index">轮播图信息</a></li>
            <li class="active">修改图片</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-md-12">
              <div class="box">
                <div class="box-header with-border">
                  <h3 class="box-title"><i class="fa fa-th"></i>修改轮播图</h3>
                </div><!-- /.box-header -->
                <div class="box-body">

					<form id="addslide" action="__CONTROLLER__/update" method="post" enctype="multipart/form-data">
						<input type="hidden" name="id" value="{$slide.id}"/>
						<div class="form-group">
							<label for="recipient-name" class="control-label">图片描述：</label>
							<input type="text" name="desc" value="{$slide.desc}" class="form-control" id="recipient-name">
						</div>
						<div class="form-group">
							<label for="recipient-name" class="control-label">选择要替换的图片：</label>
							
								<img src="__PUBLIC__/Admin/Uploads/s_{$slide.pic}"/>
								<br/><br/>
								<div id="preview">
								<img id="imghead" border="0" src="__PUBLIC__/Admin/images/img/photo_icon.png" width="90" height="90" onclick="$('#previewImg').click();"/>
							 </div>         
							<input type="file" name="pic" onchange="previewImage(this)" style="display: none;" id="previewImg">
						</div>
						<div class="form-group">
							<label for="recipient-name" class="control-label">链接地址：</label>
							<input type="text" name="link" value="{$slide.link}" style="width:500px;"/>
						</div>
						<!-- <div class="form-group">
							<label for="recipient-name" class="control-label">图片状态：</label>
							<input type="radio" name="state" value="0"/>禁用
							<input type="radio" name="state" value="1"/>启用
							</div> -->
						<input type="submit" value="确认修改" style="margin-left:100px;"/>
						<input type="reset" value="重置" style="margin-left:100px;"/>
					</form>
			  </div>
              
              </div><!-- /.box -->

              
              
            </div><!-- /.col -->
            
          </div><!-- /.row -->
         
        </section><!-- /.content -->
</block>     
<block name="myscript">
	<script>
      //图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
          var MAXWIDTH  = 200; 
          var MAXHEIGHT = 200;
          var div = document.getElementById('preview');
          if (file.files && file.files[0])
          {
              div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>';
              var img = document.getElementById('imghead');
              img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
          }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight ){
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                
                if( rateWidth > rateHeight ){
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else{
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
	
    </script>
</block>
